import React from 'react';
// 引入hook
import { useEffect } from 'react';
// 引入影院信息接口
import { getCinema } from '@/api/cinema'
// 引入外部样式
import '@/assets/css/cinema.css'
const Index = () => {
    useEffect(() => {
        // 调用影院信息接口
        getCinema().then(res => {
            //console.log(res);
            if (res.data.errNo == 0) {
                // 影院信息数组
                let cinemaArr = res.data.paginate
                // 1.创建地图实例
                var map = new window.BMapGL.Map("container");
                // 2.创建中心坐标点        
                var point = new window.BMapGL.Point(116.404, 39.915);
                // 3.地图初始化、设置中心坐标点以及地图级别
                map.centerAndZoom(point, 15);
                // 4.开始鼠标滚轮缩放功能
                map.enableScrollWheelZoom(true);
                // 5.设置地图的倾斜、旋转角度
                /* 
                map.setHeading(64.5);   //设置地图旋转角度
                map.setTilt(73);       //设置地图的倾斜角度
                */
                // 遍历影院信息数组
                cinemaArr.map(({ gpsaddress }) => {
                    // 6.设置地图的点坐标
                    var point = new window.BMapGL.Point(gpsaddress.split(',')[0], gpsaddress.split(',')[1]);
                    // 7.给点坐标设置标记
                    var marker = new window.BMapGL.Marker(point);
                    //  创建标注
                    map.addOverlay(marker);
                    // 08: 创建信息窗口
                    var opts = {
                        width: 100,
                        height: 50,
                        title: '当前位置:'
                    };
                    // 创建地理编码实例      
                    var myGeo = new window.BMapGL.Geocoder();
                    // 根据坐标得到地址描述    
                    myGeo.getLocation(new window.BMapGL.Point(gpsaddress.split(',')[0], gpsaddress.split(',')[1]), function (result) {
                        if (result) {
                            //alert(result.address);
                            //09: 创建信息窗口对象(每一个坐标点marker 都对应一个地址描述,这样需要用到逆地址解析)
                            var infoWindow = new window.BMapGL.InfoWindow(result.address, opts);  // 创建信息窗口对象
                            // 标记添加点击事件
                            marker.addEventListener('click', function () {
                                map.openInfoWindow(infoWindow, point); // 开启信息窗口
                            });
                        }
                    });
                })
            }
        })
    }, []);
    return (
        <div id='container'>
            cinema
        </div>
    );
}

export default Index;
